﻿<%@ Page Title="Title" Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" MasterPageFile="~/Views/Shared/Site.Master" %>
<asp:Content runat="server" ID="Title" ContentPlaceHolderID="TitleContent"></asp:Content>
<asp:Content runat="server" ID="Main" ContentPlaceHolderID="MainContent">
<h3>AjaxDropdown</h3>

<p class="te">
First of all the awesome tag needs to be registered (at the top of the page, this is done automatically when you drag and drop the control from the toolbox), something like this:
</p>
<pre class="prettyprint">
&lt;%@ Register TagPrefix=&quot;o&quot; Namespace=&quot;Omu.AwesomeWebForms&quot; Assembly=&quot;Omu.AwesomeWebForms, Version=1.0.0.0, Culture=neutral, PublicKeyToken=e8b65a0968999f7e&quot; %&gt;
</pre>
<p class="te">
Now you can create it like below, this control requires an Url from where it is going to get it's data via ajax
</p>
<pre class="prettyprint">
&lt;o:AjaxDropdown runat=&quot;server&quot; ID=&quot;Fruitys&quot; Url=&quot;~/svc/aja.svc/CategoriesDropdown&quot;&gt;&lt;/o:AjaxDropdown&gt;      
</pre>

<p class="te">
the service method looks like this:
</p>
<pre class="prettyprint">
[WebGet]
[OperationContract]
public IEnumerable&lt;SelectListItem&gt; CategoriesDropdown(string v)
{
    return Categories.Select(o =&gt; new SelectListItem { Value = o.Id, Text = o.Name, Selected = v == o.Id.ToString() });
}
</pre>

<p class="te">
The <b>v</b> parameter is the current value of the dropdown, and the method returns a collection of <b>SelectListItem</b> which has 3 properties: Value, Text and Selected.
So basically in the service method you get the selected value of the dropdown and you need to return a collection of options for the dropdown, and the item that was selected you mark it with Selected = true, the rest are false.
</p>


<h3>Binding to one parent using ParentId</h3>
<p class="te">
The Ajaxdropdown can be bound to a parent, and when the parent value will be changed, the child will also change it's value based on the parent's new value. Here's an example:
</p>
<pre class="prettyprint">
&lt;o:AjaxDropdown runat=&quot;server&quot; ID=&quot;Categories&quot; Url=&quot;~/svc/aja.svc/CategoriesDropdown&quot;&gt;&lt;/o:AjaxDropdown&gt; = 
&lt;%
    Fruits.ParentId = Categories.ClientID;
%&gt;
&lt;o:AjaxDropdown runat=&quot;server&quot; ID=&quot;Fruits&quot; Url=&quot;~/svc/aja.svc/FruitsDropdown&quot;&gt;&lt;/o:AjaxDropdown&gt;
</pre>
<p class="te">
This way the <b>svc/aja.svc/FruitsDropdown</b> method besides the <b>v</b> will also receive another parameter <b>parent</b> which will be the value of the parent.
</p>
<pre class="prettyprint">
[WebGet]
[OperationContract]
public IEnumerable&lt;SelectListItem&gt; FruitsDropdown(string v, string parent)
{
    var list = new List&lt;SelectListItem&gt; { new SelectListItem { Text = &quot;not selected&quot;, Value = &quot;&quot; } };
    list.AddRange(Fruits.Where(f =&gt; f.Category.Id.ToString() == parent)
    .Select(o =&gt; new SelectListItem
    {
        Text = o.Name,
        Value = o.Id,
        Selected = v == o.Id.ToString()
    }));
    return list;
}
</pre>


<h3>Binding to many parents using Data</h3>
<p class="te">
To bind the AjaxDropdown to many parents use Data property which is a Dictionary, so for each KeyValuePair of the Data Dictionary the Key will be the name of the parameter sent to the servcie method, and the Value will be the ClientID of the parent, here's an example:
</p>
<pre class="prettyprint">
&lt;o:AjaxDropdown runat=&quot;server&quot; ID=&quot;Cat1&quot; Url=&quot;~/svc/aja.svc/CategoriesDropdown&quot; Value=&quot;1&quot;&gt;
&lt;/o:AjaxDropdown&gt; and 
&lt;o:AjaxDropdown runat=&quot;server&quot; ID=&quot;Cat2&quot; Url=&quot;~/svc/aja.svc/CategoriesDropdown&quot; Value=&quot;4&quot;&gt;
&lt;/o:AjaxDropdown&gt;    =
    &lt;%
    FruitsFrom2Cat.Data = new Dictionary&lt;string, string&gt;
                        {
                            {&quot;c1&quot;,Cat1.ClientID},
                            {&quot;c2&quot;,Cat2.ClientID}
                        };
%&gt;
&lt;o:AjaxDropdown runat=&quot;server&quot; ID=&quot;FruitsFrom2Cat&quot; Url=&quot;~/svc/aja.svc/FruitsFrom2CatDropdown&quot;&gt;&lt;/o:AjaxDropdown&gt;
</pre>
<p class="te">
This way the service method besides the <b>v</b> will also receive <b>c1</b> and <b>c2</b> with the values of Cat1 and Cat2 controls.
</p>
<pre class="prettyprint">
[WebGet]
[OperationContract]
public IEnumerable&lt;SelectListItem&gt; FruitsFrom2CatDropdown(string v, string c1, string c2)
{
    var list = new List&lt;SelectListItem&gt; { new SelectListItem { Text = &quot;not selected&quot;, Value = &quot;&quot; } };

    list.AddRange(Fruits.Where(f =&gt; f.Category.Id.ToString() == c1 || f.Category.Id.ToString() == c2)
        .Select(o =&gt; new SelectListItem
        {
            Text = o.Name,
            Value = o.Id,
            Selected = v == o.Id.ToString()
        }));
    return list;
}    
</pre>
<h3>Sending predefined values to service method using Parameters </h3>
<p class="te">
Use this when you need to send additional parameters with values to the service method, example:
</p>
<pre class="prettyprint">
&lt;%
FruitWithPars.Parameters = new Dictionary&lt;string, string&gt;{ {&quot;category&quot;,&quot;3&quot;}, {&quot;hi&quot;,&quot;foo&quot;}, {&quot;ho&quot;, &quot;bar&quot;} };
%&gt;
&lt;o:AjaxDropdown runat=&quot;server&quot; ID=&quot;FruitWithPars&quot; Url=&quot;~/svc/aja.svc/FruitsWithParsDropdown&quot;&gt;&lt;/o:AjaxDropdown&gt; 
</pre>
<p class="te">
Now the service method will get 3 additional parameters: category, hi and ho
</p>
<pre class="prettyprint">
[WebGet]
[OperationContract]
public IEnumerable&lt;SelectListItem&gt; FruitsWithParsDropdown(string v, string category, string hi, string ho)
{
    //category = "3"
    //hi = "foo"
    //ho = "bar"
...
}
</pre>

<h3>Binding to a parent with multiple values</h3>
<p class="te"> When you bind to a MultiLookup or an AjaxCheckboxList, in the service method you will receive a string representation of a JSON Array, example:</p>
<pre class="prettyprint">
public IEnumerable&lt;SelectListItem&gt; FruitsFromMultiDropdown(string v, string parent)
{
    //e.g.
    //parent = "[1,3,9]";
    int[] ids = parent.GetIntArray(); // GetIntArray is an extension from Omu.AwesomeWebForms.Core
    ...
}
</pre>


<script type="text/javascript">
    $(function () {
        prettyPrint();
    });
</script>
</asp:Content>
